<!--
@Description:弹出层
@Author:zqy
@Date:2022-10-26 10:03:47
@Last Modified by:zqy
@Last Modified time:2022-10-26 10:03:47
-->
<template>
  <qmp-popup
    v-model:show="popShow"
    round
    close-on-popstate
    :closeable="closeable"
    :close-on-click-overlay="false"
    :position="position"
    get-container="body"
    :class="['custom-popup', { center: position === 'center' }]"
    v-bind="$attrs"
    @close="clickClose"
  >
    <slot name="title">
      <div v-if="clear" class="btn-clear" @click="onClear">
        <qmp-icon name="clear" />
        <span>清除已选</span>
      </div>
      <div v-if="showTitle" class="pop-title">{{ title }}</div>
    </slot>

    <div v-if="!!icon" class="pop-icon"><img :src="iconUrl" /></div>
    <slot>
      <div class="pop-content" :style="{ 'text-align': msgAlign }">
        {{ message }}
      </div>
    </slot>
    <slot name="foot">
      <div v-if="showConfirmButton || showCancelButton" class="pop-foot">
        <qmp-button v-if="showCancelButton" type="default" class="cus-btn btn-default" @click="onCancel">
          {{ cancelButtonText }}
        </qmp-button>
        <qmp-button v-if="showConfirmButton" type="primary" class="cus-btn btn-primary" @click="onConfirm">
          {{ confirmButtonText }}
        </qmp-button>
      </div>
    </slot>
  </qmp-popup>
</template>

<script lanf="ts">
  import { computed, reactive, defineComponent } from 'vue'
  import IconError from '@/assets/images/icon-error.png'
  import IconWarning from '@/assets/images/icon-warning.png'
  import IconSuccess from '@/assets/images/icon-success.png'
  export default defineComponent({
    name: 'CustomPopup',
    props: {
      modelValue: {
        type: Boolean,
        default: false
      },
      position: {
        type: String,
        default: 'center'
      },
      closeable: {
        type: Boolean,
        default: true
      },
      title: {
        type: String,
        default: ''
      }, // 标题
      message: {
        type: String,
        default: ''
      }, // 内容
      msgAlign: {
        type: String,
        default: 'left' // center  left right
      }, // 内容对齐方式
      showTitle: {
        type: Boolean,
        default: true
      }, // 是否展示标题
      showConfirmButton: {
        type: Boolean,
        default: true
      }, // 是否展示确认按钮
      showCancelButton: {
        type: Boolean,
        default: true
      }, // 是否展示取消按钮
      confirmButtonText: {
        type: String,
        default: '确定'
      }, // 确认按钮文案
      cancelButtonText: {
        type: String,
        default: '取消'
      }, // 取消按钮文案
      icon: {
        type: String,
        default: ''
      }, // 图标
      clear: {
        type: Boolean,
        default: false
      }
    },
    setup(props, ctx) {
      const datas = reactive({
        IconError,
        IconWarning,
        IconSuccess
      })
      const popShow = computed({
        set(val) {
          ctx.emit('update:modelValue', val)
        },
        get(val) {
          return props.modelValue
        }
      })
      const iconUrl = computed(() => {
        if (props.icon === 'error') {
          return datas.IconError
        } else if (datas.icon === 'warning') {
          return thdatasis.IconWarning
        } else if (datas.icon === 'success') {
          return datas.IconSuccess
        }
        return props.icon
      })
      const clickClose = () => {
        popShow.value = false
        ctx.emit('cancel')
      }
      const onCancel = () => {
        popShow.value = false
        ctx.emit('cancel')
      }
      const onConfirm = () => {
        ctx.emit('confirm')
      }
      const onClear = () => {
        ctx.emit('clear')
      }
      return {
        popShow,
        iconUrl,
        clickClose,
        onCancel,
        onConfirm,
        onClear
      }
    }
  })
</script>
<style lang="less" scoped>
  .pop-icon {
    width: 57px;
    height: auto;
    margin: 0 auto 20px;
    line-height: 0;
    img {
      width: 57px;
      height: auto;
    }
  }
  .btn-clear {
    position: absolute;
    left: 20px;
    top: 20px;
    line-height: 18px;
    font-size: 14px;
    color: var(--button-main-default);
  }
</style>
